<template>
    <div class="chatbot-management">
        <el-header>
            <h1>Chatbot 聊天管理</h1>
        </el-header>
        <div class="form-container">
            <h2 class="form-title">添加问题</h2>
            <el-form class="form" :model="form" :rules="rules" ref="form">
                <el-form-item label="问题" prop="question">
                    <el-input v-model="form.question" placeholder="请输入问题"></el-input>
                </el-form-item>
                <el-form-item label="答案" prop="answer">
                    <el-input v-model="form.answer" placeholder="请输入答案"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm" :loading="loading">添加</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-container">
            <h2 class="table-title">问题列表</h2>
            <el-table :data="questions" style="width: 100%" stripe>
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="question" label="问题"></el-table-column>
                <el-table-column prop="answer" label="答案"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="deleteQuestion(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        @current-change="handlePageChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next"
                        :total="total"
                        :disabled="loading"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { request } from "@/axios/request"
    export default {
        name: 'ChatbotManagement',
        data() {
            return {
                form: {
                    question: '',
                    answer: ''
                },
                rules: {
                    question: [{ required: true, message: '请输入问题', trigger: 'blur' }],
                    answer: [{ required: true, message: '请输入答案', trigger: 'blur' }]
                },
                questions: [],
                loading: false,
                currentPage: 1,
                pageSize: 10,
                total: 21
            }
        },
        methods: {
            // 添加问题
            async submitForm() {

                console.log("sssssssssss")
                try {
                    await this.$refs.form.validate()
                    this.loading = true
                    await request({
                        url: '/api/qabot/addQuestion',
                        method: 'post',
                        data: this.form,
                    }).then((resp) => {
                        this.$message({
                            message: resp.data.msg,
                            type: "success",
                        });
                        this.resetForm()
                    })
                } catch (error) {
                    console.error(error)
                } finally {
                    this.loading = false
                }
            },
            // 重置表单
            resetForm() {
                this.$refs.form.resetFields()
            },
            // 加载问题列表
            async loadQuestions(){
                await request({
                    url: '/api/qabot/list/'+this.currentPage+"/"+this.pageSize,
                    method: 'get',
                }).then((resp) => {
                    this.questions = resp.data.object.rows
                    this.total = Number(resp.data.object.total)
/*                    this.total = resp.data.object.total
                    this.pageSize = resp.data.object.pageSize
                    this.currentPage = resp.data.object.currentPage*/
                })
            },
// 删除问题
            async deleteQuestion(row) {
                try {
                    const confirmResult = await this.$confirm('确定删除该问题吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    if (confirmResult === 'confirm') {
                        this.loading = true

                        await request({
                            url: '/api/qabot/delQuestion/'+ row.id,
                            method: 'delete',
                        }).then((resp) => {
                            this.$message({
                                message: resp.data.msg,
                                type: "success",
                            });

                        })

                    }
                } catch (error) {
                    console.error(error)
                } finally {
                    this.loading = false
                }
                this.loadQuestions()
            },
// 处理分页
            handlePageChange(page) {
                this.currentPage = page
                this.loadQuestions()
            }
        },
        mounted() {
            this.loadQuestions()
        }
    }
</script>

<style scoped>
    .chatbot-management {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
    }

    .el-header {
        background-color: #304156;
        color: #fff;
        text-align: center;
        font-size: 24px;
        padding: 0px;
        width: 100%;
        box-shadow: 0px 0px 10px #ccc;
    }

    .form-container {
        width: 70%;
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px #ccc;
        padding: 20px;
    }

    .form-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .form {
        width: 80%;
    }

    .table-container {
        width: 70%;
        box-shadow: 0px 0px 10px #ccc;
        padding: 20px;
    }

    .table-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .el-table__row:hover {
        background-color: #f5f7fa !important;
    }

    .el-table th,
    .el-table td {
        text-align: center;
    }

    .el-pagination .el-pager {
        border: none;
    }

    .el-pagination .is-active {
        background-color: #304156 !important;
        color: #fff !important;
    }

    .el-pagination .number {
        color: #304156 !important;
    }

    .el-button--danger {
        background-color: #f56c6c !important;
        border-color: #f56c6c !important;
    }

    .el-button--danger:hover {
        background-color: #f66 !important;
        border-color: #f66 !important;
    }
</style>
